<template>
	<view class="page">
		<view class="caption"> 广告图片</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
				 <image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
		<view class="caption"> 修改店铺弹窗 </view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList1" :key="index" @tap="ViewImage1" :data-url="imgList1[index]">
				 <image :src="imgList1[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg1" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage1" v-if="imgList1.length<1">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
<!-- 		<view class="next" @tap="shopBannerUpdate">
			<view class="next2">添加</view>
		</view> -->
	</view>
</template>

<script>
	import {shopBannerUpdate,getShopByUserId} from '@/api/index.js';
	import config from '@/config/index';
	export default {
		data() {
			return {
				imgList: [],
				imgList1:[],
				list:[],
				type:1,
			}
		},
		onLoad() {
			this.getShopInfo()
		},
		methods: {
			getShopInfo:function(){
				let _that = this
				getShopByUserId({}).then(res=>{
					console.log(res)
					// 获取商铺信息
					_that.imgList = res.shopBanner.replace(/\"/g, "").replace("\[","").replace("\]","").split(',')
					_that.imgList1 = res.shopPictures.replace(/\"/g, "").replace("\[","").replace("\]","").split(',')
					console.log(_that.imgList);
				})
			},
			shopBannerUpdate(){
				let _that = this
				console.log(_that.list.toString())
				if(_that.type == 1){
					_that.list = _that.imgList
				}
				if(_that.type == 2){
					_that.list = _that.imgList1
				}
				shopBannerUpdate(_that.list.toString(),_that.type).then(re =>{
					// this.getShopInfo()
					// uni.showToast({
					//     title: '操作成功',
					//     duration: 2000
					// });
				}).catch(re=>{
					console.log(re);
				});
			},
			ChooseImage() {
				let _that = this
				_that.type = 1
				console.log("这里的是上传前的"+_that.imgList.length)
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success(res) {
						// 获得临时路径 
						var tempFilePath = res.tempFilePaths;
						uni.uploadFile({
							url: config.requestUrl + '/uploadCt/files',
							filePath: tempFilePath[0],
							name: 'file',
							header:{
								'Content-Type': 'application/x-www-form-urlencoded',
								'userToken':uni.getStorageSync('token'),
							},
							success: (res) => {
								let json = JSON.parse(res.data)
								console.log(json)
								if (_that.imgList.length != 0) {
									console.log(_that.imgList)
									_that.imgList = _that.imgList.concat(json.result)
									_that.shopBannerUpdate()
								} else {
									_that.imgList = json.result
									_that.shopBannerUpdate()
								}
								console.log("这里的是上传后的"+_that.imgList.length)
							}
						});
					}
				});
			},
			ChooseImage1() {
				let _that = this
				_that.type = 2
				console.log("这里的是上传前的"+_that.imgList1.length)
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success(res) {
						// uni.showToast({
						//     title: res.tempFilePaths+"上传结果",
						//     duration: 2000
						// });
						// 获得临时路径 
						var tempFilePath = res.tempFilePaths;
						uni.uploadFile({
							url: config.requestUrl + '/uploadCt/files',
							filePath: tempFilePath[0],
							name: 'file',
							header:{
								'Content-Type': 'application/x-www-form-urlencoded',
								'userToken':uni.getStorageSync('token'),
							},
							success: (res) => {
								// uni.showToast({
								//     title: JSON.stringify(res)+"上传图片成功的结果",
								//     duration: 6000
								// });
								let json = JSON.parse(res.data)
								console.log(json)
								if (_that.imgList1.length != 0) {
									console.log(_that.imgList1)
									_that.imgList1 = _that.imgList1.concat(json.result)
									_that.shopBannerUpdate()
								} else {
									_that.imgList1 = json.result
									_that.shopBannerUpdate()
								}
								// uni.showToast({
								//     title: _that.imgList1[0]+"上传图片地址",
								//     duration: 2000
								// });
								console.log("这里的是上传后的"+_that.imgList1.length)
							},					    
							fail: (res) => {
							uni.showToast({
								icon:"none",
							    title: JSON.stringify(res)+"上传图片失败的结果",
							    duration: 6000
							});
					    },
						});
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				let _that = this
				console.log(_that.imgList);
				uni.showModal({
					title: '提示',
					content: '确定要删除该图吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							_that.imgList.splice(e.currentTarget.dataset.index, 1)
							if(_that.imgList.length !=0){
								_that.shopBannerUpdate();
							}
							console.log(_that.imgList);
						}
					}
				})
			},
			ViewImage1(e) {
				uni.previewImage({
					urls: this.imgList1,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg1(e) {
				let _that = this
				console.log(_that.imgList1);
				uni.showModal({
					title: '提示',
					content: '确定要删除该图吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							_that.imgList1.splice(e.currentTarget.dataset.index, 1)
							if(_that.imgList1.length !=0){
								_that.shopBannerUpdate();
							}
							console.log(_that.imgList1);
						}
					}
				})
			},
		}
	}
</script>

<style>
	page{background: #fff;}
	.caption{color: #424242;font-weight: 600;padding:24rpx;}
	.next{
		margin:0 76rpx;
	}
	.next .next2{
		background: url("../../../static/images/band-card.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;	
		width:600rpx;
		height:80rpx;
		margin:130rpx auto 0;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
	}
</style>
